
<template>
  <div class="piechart">
    <div class="echarts_box">
      <div class="title">违法行为统计</div>
      <div class="box_item">
        <AlarmStatistics :chartData="chartData3" :x-n-um="1140"></AlarmStatistics>
      </div>
    </div>
    <div class="echarts_box">
      <div class="title">风险隐患统计</div>
      <div class="box_item"><RiskTypeChart :chartData="chartData4" :x-n-um="1140"></RiskTypeChart></div>
    </div>
    <div class="echarts_box">
      <div class="title">区域统计</div>
      <div class="box_item"><AlarmLevelChart></AlarmLevelChart></div>
    </div>
    <div class="echarts_box">
      <div class="title">类型统计</div>
      <div class="box_item"><AlarmTypeChart :chart-data="chartData2"></AlarmTypeChart></div>
    </div>
    <div class="echarts_box">
      <div class="title">人员密集场所</div>
      <div class="flex_box">
        <div class="box_item">
          <SecureChat
            :chart-data="chartData.data"
            :total="chartData.total"
            :show-legend="false"
            @chartClick="chartClick"
          ></SecureChat>
        </div>
        <div class="box_item">
          <GradeChart :chartData="chartData5" title="5426"></GradeChart>
        </div>
      </div>
    </div>
    <div class="echarts_box">
      <div class="title">事件统计</div>
      <div class="box_item"><PieCharts3D :chart-data="pies3dData"></PieCharts3D></div>
    </div>
  </div>
</template>
<script setup>
import setRem from '@/utils/rem'
import { RouterView } from 'vue-router'
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router' // 引入useRouter函数
import AlarmStatistics from './components/AlarmStatistics.vue'
import RiskTypeChart from './components/RiskTypeChart.vue'
import AlarmLevelChart from './components/AlarmLevelChart.vue'
import AlarmTypeChart from './components/AlarmTypeChart.vue'
import SecureChat from './components/secureChat.vue'
import GradeChart from './components/gradeChart.vue'
import PieCharts3D from './components/PieCharts3D.vue'
const chartData = reactive({
  data: [],
  total: 0
})
const chartData2 = reactive([
  { name: '台风', value: 26, percent: '3.3%' },
  { name: '森林火灾', value: 9, percent: '13.5%' },
  { name: '火灾事故', value: 10, percent: '35.8%' },
  { name: '水上交通事故', value: 60, percent: '47.4%' },
  { name: '其他事故', value: 30, percent: '15%' },
  { name: '事故', value: 30, percent: '20%' }
])
const chartData3 = reactive([
  { name: '拨打电话', value: 20 },
  { name: '抽烟报警', value: 14 },
  { name: '设备遮挡失效', value: 12 },
  { name: '未系安全带', value: 19 },
  { name: '双手脱离方向盘', value: 17 },
  { name: '超速报警', value: 10 },
  { name: '驾驶超时', value: 9 },
  { name: '客运车辆凌晨2-5时运行', value: 11 }
])
const chartData4 = [
  {
    name: '重大风险',
    value: 30,
    itemStyle: {
      color: '#C31010'
    }
  },
  {
    name: '较大风险',
    value: 50,
    itemStyle: {
      color: '#FF7921'
    }
  },
  {
    name: '一般风险',
    value: 35,
    itemStyle: {
      color: '#FFDD43'
    }
  },
  {
    name: '低 风 险',
    value: 70,
    itemStyle: {
      color: '#1F82F6'
    }
  }
]
const chartData5 = ref([
  { name: '贸易类', value: 20 },
  { name: '建筑材料', value: 30 },
  { name: '工艺品', value: 40 },
  { name: '百货', value: 30 },
  { name: '其他', value: 40 }
])
const poptype = ref('')
const chartClick = (e) => {
  poptype.value = ''
  setTimeout(() => {
    poptype.value = '人员密集场所'
  }, 0)
  densitype.value = e
}
const getpeople = () => {
  let res = {
    data: [
      {
        place_type: '集贸市场',
        num: 1
      },
      {
        place_type: '娱乐场所',
        num: 1
      },
      {
        place_type: '体育场馆',
        num: 8
      },
      {
        place_type: '文化场所',
        num: 702
      },
      {
        place_type: '商场超市',
        num: 68
      }
    ]
  }
  chartData.data = res.data.map((item) => {
    return {
      name: item.place_type,
      value: item.num
    }
  })
  chartData.total = chartData.data.reduce((a, b) => {
    return a + b.value
  }, 0)
}
const pies3dData = [
  {
    name: '特别重大',
    value: 30,
    itemStyle: {
      color: '#C31010',
      opacity: 0.3
    }
  },
  {
    name: '重大',
    value: 50,
    itemStyle: {
      color: '#FF7921',
      opacity: 0.2
    }
  },
  {
    name: '较大',
    value: 35,
    itemStyle: {
      color: '#FFDD43',
      opacity: 0.2
    }
  },
  {
    name: '一般',
    value: 70,
    itemStyle: {
      color: '#1F82F6',
      opacity: 0.2
    }
  }
]
onMounted(() => {
  getpeople()
  nextTick(() => {})
})
</script>
<style lang="less" scoped>
.piechart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 40px;
  display: flex;
  // background: rgba(3, 35, 65, 0.6);
  flex-wrap: wrap;
  .echarts_box {
    margin: 10px 120px;
    width: 1790px;
    height: 960px;
    background: url('@/assets/images/card-2-1.png');
    background-size: 100% 100%;
    .title {
      width: 100%;
      height: 106px;
      line-height: 106px;
      padding-left: 90px;
      font-weight: 500;
      font-family: 'zitichuanqitezhanti';
      text-shadow: 0rem 0.32rem 0.16rem rgba(0, 0, 0, 0.55);
      background: -webkit-gradient(linear, left top, left bottom, from(#f0ffb5), color-stop(#e6f5f8), to(#2ed2fa));
      background: linear-gradient(to bottom, #f0ffb5, #e6f5f8, #2ed2fa);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    .box_item {
      width: 1790px;
      height: 840px;
      // background: rgba(3, 35, 65, 0.4);
      // background: url('@/assets/images/card-2-1.png');
      background-size: 100% 100%;
    }
    .flex_box {
      width: 1790px;
      height: 840px;
      background-size: 100% 100%;
      display: flex;
      .box_item {
        flex: 1;
      }
    }
  }
}
</style>
